<template>
  <div class="bos">
    <head-page
      :title="`${this.$route.query.title}`"
      backUrl="/my"
      id="backstyle"
    >
      <img src="../../../assets/black_dian.png" alt="" />
    </head-page>
    <div v-if="dataType == 'Object'">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in list.minePic" :key="index">
          <img :src="getImgUrl(item)" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="bottom war">
        <!-- <div class="tac m-b-10 bold-700">{{ list.mineTitle }}</div> -->
        <div class="center area-center bold-size">
          <p class="richText" v-html="list.mineText"></p>
        </div>
      </div>
    </div>
    <div v-else class="war">
      <div v-if="list.length && list[0].father" class="area-center bold-size">
        <div v-for="(item, index) in list" :key="index" class="m-t-20">
          <div class="m-t-07 title-center">{{ item.father }}</div>
          <div class="m-l-20" v-for="(val, i) in item.list" :key="i">
            <div @click.stop="detail(item, val)" class="m-t-07">
              {{ val.name }}
            </div>
          </div>
        </div>
      </div>

      <div v-else>
        <div v-for="(item, index) in list" :key="index">
          <div @click="detail('', item)" class="bold-700 m-t-07">
            {{ index + 1 }}. <span> {{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMineDetail } from "@/api/index";
export default {
  data() {
    return {
      list: "",
      dataType: "",
    };
  },
  methods: {
    getImgUrl(img) {
      return this.montageImgUrl(img);
    },
    // 详情页
    detail(item, val) {
      this.$router.push({
        name: "brandDetails",
        query: {
          id: val.id,
          title: val.name ? val.name : val.title,
        },
      });
    },
    // 清除token
    clean() {},
  },
  mounted() {
    //点击标题查看详情
    getMineDetail({
      Id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.list = res.data.data;
        this.dataType = this.getRawType(this.list);
        if (this.getRawType(this.list) == "Object") {
          this.list.minePic = this.splitImg(this.list.minePic);
          this.list.mineText = this.dataHTML(res.data.data.mineText);
        }
      }
    });
  },
};
</script>

<style scoped >
.bos {
  width: 100%;
  /* background-color: #f0eff5; */
}
.my-swipe img {
  width: 100%;
  height: 2rem;
}
.Head_top img {
  width: 0.2rem;
  margin-right: 0.05rem;
}
/* 底部区域 */
.bottom {
  /* padding: 0.15rem 0.2rem; */
  box-sizing: border-box;
}
/* 版心区域 */
.center {
  margin-top: 0.05rem;
}
h3 {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.2rem;
}
/* 头标区域 */
.top h3 img {
  width: 0.24rem;
  margin-right: 0.05rem;
}
p {
  font-weight: 700;
  margin-top: 0.05rem;
  padding-top: 0.1rem;
}
p:nth-child(1) {
  padding-top: 0;
}
</style>